<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />

		<style type="text/css">
			.mui-numbox {
				position: absolute;
				right: 5px;
				top: 15px;
			}
			
			.mui-bar-tab .mui-tab-item.mui-active {
				color: #929292;
			}
			
			.mui-tab-item:first-child {
				border-right: 1px solid grey;
			}
			
			.mui-tab-item {
				background: #000;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">购物车</h1>
		</header>
		<div class="mui-content">
			<!--商品列表-->
			<ul class="mui-table-view" id="goodsList">
			</ul>
		</div>

		<!--底部栏-->
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item" id="settlement">
				提交订单
			</a>
		</nav>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/model.js"></script>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
			mui.plusReady(function() {

				var menuIds = '';
				var counts = '';
				var content = "";
				for(var i = 0; i < plus.storage.getLength(); i++) {
					$("#goodsList").html(''); //置空
					var id = plus.storage.key(i);
					if(id != "table_id") {
						var dstr = eval('(' + plus.storage.getItem(id) + ')');
						console.log("id " + id + ", value " + dstr)
						content += "<li class='mui-table-view-cell mui-media' data-id='" + dstr.id + "' data-num='" + dstr.num + "'>" +
							'<a href="javascript:;"><img class="mui-media-object mui-pull-left" src="">' +
							'<div class="mui-media-body"><span>' + dstr.dname + '</span>' +
							'<div class="mui-numbox" data-numbox-step="1" data-numbox-min="1" data-numbox-max="10">' +
							'<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>' +
							'<input class="mui-input-numbox" value="' + dstr.num + '" readonly="readonly" type="number" data-price="" data-value="' + dstr.num + '">' +
							'<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>' +
							'</div></div></a></li>';

						$("#goodsList").append(content);
					}
					mui(".mui-numbox").numbox();

				}
				var list = $(".mui-media");

				document.getElementById("settlement").addEventListener("tap", function() {
					//遍历拿到所有商品数量
					$(".mui-media").each(function() {
						menuIds = menuIds + $(this).attr('data-id') + ',';
						counts = counts + $(this).children().children().children().children("input").val() + ',';
					});
					var tableId = plus.storage.getItem("table_id")

					var result = Model.menu.addOrder({
						tableId: tableId,
						menuIds: menuIds,
						counts: counts,
					})

					mui.alert("提交订单成功");
					plus.storage.clear();
					location.href='index.html';
					menuIds = ''; //置空
					counts = '';

				});

			});

			function settlementPrice(totalPrice) { //结算
				var numbers = document.getElementsByClassName("mui-input-numbox");
				var list = document.getElementsByClassName("mui-media");
				var productArray = [];
				for(var i = 0, len = numbers.length; i < len; i++) {
					// 将所有个数不为0的商品信息，添加到数组中
					if(numbers[i].value != "0") {
						var productDetail = list[i].getAttribute("data-detail");
						//console.info(productDetail);
						var productObj = JSON.parse(productDetail);
						// 将商品的数量添加到商品对象中
						productObj["productNum"] = numbers[i].value;
						productArray.push(productObj);
						//console.info(JSON.stringify(productArray));
					}
				}
				mui.openWindow({
					url: "../order/userOrder.html",
					id: "userOrder",
					waiting: {
						autoShow: false
					},
					extras: {
						productList: productArray,
						totalPrice: totalPrice
					} //将商品列表信息和总价格，一起传递到下一个窗口
				});
			}
		</script>
	</body>

</html>